<template>

<el-dialog
        :model-value="dialogVisible"
        width="70%"
        
        :align-center="true"
        @close="cancel"
        :destroy-on-close="true"
    >
    <!-- <template #header="{ titleId, titleClass }">
            <div :id="titleId" :class="titleClass">
                {{ props.title }}
            </div>
    </template> -->

    <div style="height: 500px; width: 100%;">
        <!-- <img :src="data_obj.image" alt="" height="500px"> -->
        <div class="item__box" v-if="data_obj.file_type=='png'">
            <el-image
            style="width: 100%; height: 100%; object-fit: contain;"
            :src="data_obj.path_url"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[data_obj.path_url]"
            fit="contain"
            :initial-index="4"
            />
        </div>

        <div class="item__box" v-if="data_obj.file_type=='mp4'">
            <video muted controls :src="data_obj.path_url" style="width: 100%; height: 100%; object-fit: contain;"></video>
        </div>
        
    </div>


</el-dialog>

</template>

<script setup>
import { ref, onMounted, nextTick, watch, watchEffect, reactive } from 'vue'

const props = defineProps(['visible', "title", "instance"])
const emit = defineEmits(['cancel', 'confirm'])
const formRef = ref(null);
const dialogVisible = ref(props.visible)
watch(() => props.visible, (value) => {
    if (value){
        dialogVisible.value = true
    }else{
        emit('cancel')
        dialogVisible.value = false
    }
    // value && (dialogVisible.value = true)
})

const data_obj = ref(props.instance)
watchEffect(() => data_obj.value = props.instance)


onMounted(()=>{
    
})


function cancel(){
    emit('cancel')
    dialogVisible.value = false
}


onMounted(()=>{
    
})

</script>

<style lang="scss" scoped>
.item__box{
    height: 100%;
    width: 100%;
}
</style>













